<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <link href="./public/css/iSlider.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #iSlider-wrapper ul {
            margin: 0;
            padding: 0;
            list-style: none;
            height: 100%;
            overflow: hidden;
        }

        #iSlider-wrapper li {
            position: absolute;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            list-style: none;
        }

        #iSlider-wrapper {
            position: absolute;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .content {
            padding: 10%;
            height: 100%;
            width: 100%;
            -webkit-box-sizing: border-box;
        }

        .content h1 {
            margin: 2em 0;
        }

        .content h2 {
            margin: 2em 0;
        }

        .content p {
            margin: 1em 0;
        }

        .page1 {
            background-color: #F5A8A8;
            color: #FFF;
        }

        .page2 {
            background-color: #90FFB7;
        }

        .page3 {
            background-color: #90ABFF;
            color: #FFF;
        }

        .page4 {
            background-color: #FCFF90;
        }

        .page5 {
            background-color: #E390FF;
            color: #FFF;
        }
    </style>

</head>
<body>
<div id="iSlider-wrapper"></div>
<script type="text/javascript" src="./public/js/iSlider.js"></script>
<script type="text/javascript" src="./public/js/iSlider.plugin.button.js"></script>
<script>
    var list = [{
        'content': '<div class="content home"><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
    },
        {
            'content': '<div class="content page1"><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
        },
        {
            'content': '<div class="content page2"><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
        },
        {
            'content': '<div class="content page3"><h1>Page3</h1><h2>This is Page3</h2><p>Page3 is pretty awsome</p><div>'
        },
        {
            'content': '<div class="content page4"><h1>Page4</h1><h2>This is Page4</h2><p>Page4 is pretty awsome</p><div>'
        },
        {
            'content': '<div class="content page5"><h1>Page5</h1><h2>This is page5</h2><p>page5 is pretty awsome</p><div>'
        }];

    var opts = {
        data: list,
        type: 'dom',
        dom: document.getElementById("iSlider-wrapper"),
        duration: 1000,
        plugins: ['button']
    };

    var islider = new iSlider(opts);
</script>
</body>
</html>